<template>
    <el-row :gutter="20" class="main-cont box box-tb padd20">
        <el-col :span="24">
            <el-col :span="12">
                <el-col class="mb20 box box-pack-start">
                    <!-- <el-tag type="success">复制课程</el-tag> -->
                    <h3 style="font-size: 18px;">复制课程</h3>
                </el-col>
                <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                    <el-form-item label="选择课程" prop="cousid">
                        <el-select v-model="form.cousid" filterable placeholder="请选择要复制的课程">
                            <el-option v-for="item in cousList" :key="item.value" :label="item.label"
                                :value="item.value">
                                <span style="float: left">{{ item.label }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                            </el-option>
                        </el-select>
                        <el-input v-model="form.cousid" style="width: 217px;" placeholder="无课程时手动添加课程id" class="mt10">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="选择学校" prop="schoolid">
                        <el-select v-model="form.schoolid" filterable placeholder="请选择要添加课程的学校">
                            <el-option v-for="item in schoolData" :key="item.value" :label="item.label"
                                :value="item.value">
                                <span style="float: left">{{ item.label }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleCourseConfirm('form')">添 加</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="12">
                <el-col class="mb20 box box-pack-start">
                    <!-- <el-tag type="warning">复制实践</el-tag> -->
                    <h3 style="font-size: 18px;">复制实践</h3>
                </el-col>
                <el-form ref="forms" :model="forms" :rules="ruless" label-width="100px">
                    <el-form-item label="选择学校1" prop="fromschoolid">
                        <el-select v-model="forms.fromschoolid" filterable placeholder="请选择要复制的学校">
                            <el-option v-for="item in schoolData" :key="item.value" :label="item.label"
                                :value="item.value">
                                <span style="float: left">{{ item.label }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                            </el-option>
                        </el-select>
                        <el-input v-model="forms.fromschoolid" style="width: 217px;" placeholder="无学校时手动添加学校id"
                            class="mt10"></el-input>
                    </el-form-item>
                    <el-form-item label="选择学校2" prop="toschoolid">
                        <el-select v-model="forms.toschoolid" filterable placeholder="请选择要添加实践的学校">
                            <el-option v-for="item in schoolData" :key="item.value" :label="item.label"
                                :value="item.value">
                                <span style="float: left">{{ item.label }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleSjConfirm('forms')">添 加</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-col>
        <el-col class="box box-pack-start">
            <el-col class="tl" :span="12" style="color: #8492a6;">
                <div>复制课程/选择课程 ：是要选择复制的课程（此课程是当前服务团队的课程）</div>
                <div>复制课程/选择学校 ：是要添加课程的学校（学校顺序-倒序）</div>
            </el-col>
            <el-col class="tl" :span="12" style="color: #8492a6;">
                <div>复制课程/选择学校1 ：是要选择选中学校的实践（默认劳动教育学术平台学校的实践数据）</div>
                <div>复制课程/选择学校2 ：是要添加实践的学校（学校顺序-倒序）</div>
            </el-col>
        </el-col>
        <el-col :span="24" class="mt10">
            <el-col :span="12">
                <el-col class="mb20 box box-pack-start">
                    <h3 style="font-size: 18px;">分享设置</h3>
                </el-col>
                <el-form ref="formstate" :model="formstate" :rules="staterules" label-width="100px">
                    <el-form-item label="标题" prop="title">
                        <el-input v-model="formstate.title" placeholder="请填写标题"></el-input>
                    </el-form-item>
                    <el-form-item label="内容" prop="content">
                        <el-input v-model="formstate.content" type="textarea" placeholder="请填写内容"></el-input>
                    </el-form-item>
                    <el-form-item label="图片" prop="image" ref="image">
                        <el-upload class="avatar-uploader" :action="uploadfileurl" :show-file-list="false"
                            :on-progress="progress" :on-success="success" :before-upload="beforeUpload"
                            accept="image/jpeg,image/jpg,image/png,">
                            <el-image v-if="formstate.image" :src="formstate.image" class="avatar" fit="cover"></el-image>
                            <div v-else class="upload-icon">
                                <i class="el-icon-upload"></i>
                                <div>上传</div>
                            </div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleShareSave('formstate')">保 存</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="12">
                <el-col class="mb20 box box-pack-start">
                    <h3 style="font-size: 18px;">示例：</h3>
                </el-col>
                <el-col>
                    <el-image src="/static/image/sl.png"></el-image>
                </el-col>
            </el-col>
        </el-col>
        <Set></Set>
    </el-row>
</template>

<script>
    import Set from "@/components/set.vue"
    export default {
        components:{Set},
        data() {
            return {
                searchText: '',
                schoolid: this.$store.state.loginInfo.user.schoolId,
                form: {
                    schoolid: null,
                    cousid: null
                },
                forms: {
                    fromschoolid: null,
                    toschoolid: null,
                },
                formstate: {
                    id: 1,
                    title: '',
                    content: '',
                    image: ''
                },
                uploadfileurl: this.$url.baseURL + '/upload/uploadfile',
                schoolData: [],
                cousList: [],
                jyzid: 0,
                rules: {
                    schoolid: [{
                        required: true,
                        message: '请选择学校',
                        trigger: 'change'
                    }],
                    cousid: [{
                        required: true,
                        message: '请选择课程',
                        trigger: 'change'
                    }],
                },
                ruless: {
                    fromschoolid: [{
                        required: true,
                        message: '请选择学校',
                        trigger: 'change'
                    }],
                    toschoolid: [{
                        required: true,
                        message: '请选择学校',
                        trigger: 'change'
                    }]
                },
                staterules: {
                    title: [{
                        required: true,
                        message: '请填写标题',
                        trigger: 'blur'
                    }],
                    image: [{
                        required: true,
                        message: '请上传图片',
                        trigger: 'change'
                    }],
                    content: [{
                        required: true,
                        message: '请填写内容',
                        trigger: 'blur'
                    }]
                },
            }
        },
        created() {
            this.getSchoolData();
            this.getJyzData()
            this.getShare()
        },
        mounted() {
            // console.log(this.info);
        },
        methods: {
            getShare() {
                let url = '/share/getShare';
                let params = {
                    id: 1
                };
                this.$ajax.post(url, params).then(res => {
                    console.log(res.data);
                    if (res.code == 0) {
                        this.formstate = res.data
                    } else {}
                })

            },
            progress(event) {
                this.showProgress = true;
                this.progInt = parseInt(event.loaded / event.total * 100, 10);
            },
            success(response, file, fileList) {
                console.log(response.body.data.url);
                this.formstate.image = response.body.data.url;
                this.$refs['image'].clearValidate()
            },
            beforeUpload(file) {
                const fileName = file.name;
                const index = fileName.lastIndexOf(".");
                const ext = fileName.substr(index + 1);
                const arr = ["jpg", "png", "gif", "jpeg"];
                const isOk = arr.includes(ext);
                if (!isOk) {
                    this.$message.warning('封面格式暂不支持！');
                    return false;
                }
                var imgSize = file.size / (1024 * 1024);
                if (imgSize > 50) {
                    this.$message.warning(`当前文件${ parseInt(imgSize) }M,上传文件不能超过50M`)
                    return false
                }
            },
            getJyzData() {
                let url = '/yjyz/getSchoolJyz';
                let params = {
                    schoolid: this.schoolid,
                };
                this.$ajax.post(url, params).then(res => {
                    if (res.code == '0') {
                        this.jyzid = res.data;
                        this.getCourseData();
                    }
                })
            },
            getCourseData() {
                let url = '/ycous/xtjyCousList';
                let params = {
                    jyzid: this.jyzid
                };
                this.$ajax.post(url, params).then(res => {
                    if (res.code == '0') {
                        // console.log(res);
                        this.cousList = res.list.map(res => {
                            return {
                                value: res.id,
                                label: res.name
                            }
                        })
                    }
                })
            },
            // 查询所有学校
            getSchoolData() {
                let url = '/yschool/teampagelist';
                let params = {
                    searchText: this.searchText,
                    schoolid: this.schoolid,
                    pageNum: 1,
                    pageSize: 16000
                };
                console.log(params)
                this.$ajax.post(url, params).then(res => {
                    if (res.code == '0') {
                        this.schoolData = res.list.list.map(res => {
                            return {
                                value: res.id,
                                label: res.name
                            }
                        }).reverse()
                        // console.log(this.schoolData);
                    }
                })
            },
            // 保存课程
            handleCourseConfirm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        const loading = this.$loading({
                            lock: true,
                            text: 'Loading',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.3)'
                        });
                        let url = '/ycous/copyCousToSchool';
                        let params = {
                            cousid: this.form.cousid,
                            schoolid: this.form.schoolid
                        };
                        this.$ajax.post(url, params).then(res => {
                            loading.close();
                            if (res.code == 0) {
                                this.$message.success('添加成功')
                            } else {
                                this.$message.error(res.code)
                            }
                        })

                    } else {
                        return false;
                    }
                });
            },
            handleSjConfirm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        const loading = this.$loading({
                            lock: true,
                            text: 'Loading',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.3)'
                        });
                        let url = '/yldsj/copysj';
                        let params = {
                            fromschoolid: this.forms.fromschoolid,
                            toschoolid: this.forms.toschoolid
                        };
                        this.$ajax.post(url, params).then(res => {
                            loading.close();
                            if (res.code == 0) {
                                this.$message.success('添加成功')
                            } else {
                                this.$message.error(res.code)
                            }
                        })

                    } else {
                        return false;
                    }
                });
            },
            handleShareSave(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        const loading = this.$loading({
                            lock: true,
                            text: 'Loading',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.3)'
                        });
                        let url = '/share/setShare';
                        let params = this.formstate;
                        this.$ajax.post(url, params).then(res => {
                            loading.close();
                            if (res.code == 0) {
                                this.$message.success('保存成功')
                            } else {
                                this.$message.error(res.code)
                            }
                        })

                    } else {
                        return false;
                    }
                });
            },
        }
    }
</script>

<style scoped lang="scss">
    .main-cont {
        background-color: #fff;
        padding-left: 100px;

        .user-info {
            width: 300px;

            .user-name {
                color: #181623;
                font-size: 26px;
            }

            .role {
                padding: 0 10px;
                width: auto;
                height: 28px;
                line-height: 28px;
                background: #D9DCF9;
                border-radius: 14px;
                color: #7F84E4;
                font-size: 17px;
            }
        }

        .title {
            width: 70px;
            height: 30px;
            line-height: 30px;
            font-size: 17px;
            color: #2F3142;
            border-bottom: 5px solid #626BF1;
        }

        .cont {
            padding: 0 20px;
            width: 328px;
            height: 42px;
            line-height: 42px;
            background: #F8F9FC;
            border: 1px solid #EEF4F8;
            border-radius: 4px;
            color: #7B879F;
            font-size: 17px;
        }

        .posr {
            position: relative;

            &:hover {
                .posa {
                    display: block;
                }
            }
        }

        .posa {
            display: none;
            width: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            font-size: 17px;
        }

        .avatar {
            width: 110px;
            height: 110px;
        }
    }
</style>
